<template>
  <Dialog :visible="transferVisible" :title="$t('调单')" width="80%" :footer="false" @close="close">
    <el-form label-width="80px" :model="transferPage" ref="transferSearch">
      <el-row :gutter="24">
        <el-col :span="24">
          <el-col :span="6" :xs="24">
            <el-form-item :label="$t('客群名称')" prop="guestGroupId" :rules="[
                {required: true, message: this.$t('请选择客群名称'), trigger: 'change'}
          ]">
              <el-select v-model="transferPage.guestGroupId" style="width: 100%"
              >
                <el-option v-for="item in guestGroupList" :key="item.guestGroupId" :label="item.guestGroupName"
                           :value="item.guestGroupId"></el-option>
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('APP名称')" prop="productName" :rules="[
                {required: true, message: this.$t('请选择APP'), trigger: 'change'}
          ]">
              <el-col style="padding: 0" v-show="$permiss[255]">
                <el-select :placeholder="$t('请选择APP')" @change="productChange" style="width: 100%"
                           v-model="transferPage.productName">
                  <el-option v-for="item in productList" :key="item.productId"
                             :label="item.appName"
                             :value="item.productName"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" v-show="$permiss[971]">
            <el-form-item prop="adminUserId" :label="$t('经理名称')">
              <el-select :placeholder="$t('请选择经理')" @change="managerSelect" style="width: 100%"
                         v-model="transferPage.managerId" clearable>
                <el-option v-for="item in managerList" :key="item.adminUserId" :label="item.adminName"
                           :value="item.adminUserId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item prop="adminUserId" :label="$t('提醒员')">
              <el-select :placeholder="$t('请选择提醒员')" filterable style="width: 100%" clearable
                         v-model="transferPage.adminUserId">
                <el-option v-for="item in auditPersonnelList" :key="item.adminUserId" :label="item.adminName"
                           :value="item.adminUserId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item :label="$t('订单编号')" prop="recordId">
              <el-input v-model="transferPage.recordId"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item :label="$t('用户姓名')" prop="userName">
              <el-input v-model="transferPage.userName"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item :label="$t('手机号码')" prop="userPhone">
              <el-input v-model="transferPage.userPhone"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" style="text-align: right">
            <el-button type="primary" @click="getTransferTable">{{ $t('查询') }}</el-button>
            <el-button @click="resetTransferForm">{{ $t('重置') }}</el-button>
          </el-col>
        </el-col>

      </el-row>

    </el-form>
    <div style="margin: 10px 0;text-align: right">
      <el-button type="primary" @click="selectDistribution" v-show="$permiss[257]">{{ $t('所选分配') }}</el-button>
      <el-button type="primary" @click="searchDistribution" v-show="$permiss[256]">{{ $t('所搜分配') }}</el-button>
    </div>
    <Table :table-data="transferTable" :table-column="transferTableColumn" :page="transferPage"
           :loading="loading"
           :selection="true"
           @handleSelectionChange="transferSelectChange"
           :select-rows="transferSelectRows"
           @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
    ></Table>

    <!--     选择分配人员弹窗-->
    <Dialog :visible="distribution.isShow" :title="distribution.title" :append-body="true"
            @close="clearDistributionSearch(),distribution.isShow = false" width="50%"
            @cancel="distribution.isShow = false"
            @confirm="distributionSubmit()"
    >
      <el-form label-width="80px" :model="distributionPage" ref="distributionSearch">
        <el-row :gutter="24">
          <el-col :span="8" :xs="24">
            <el-form-item :label="$t('姓名')" prop="adminName">
              <el-input v-model="distributionPage.adminName"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item :label="$t('账号')" prop="accountNumber">
              <el-input v-model="distributionPage.accountNumber"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24" style="text-align: right">
            <el-button type="primary" @click="getDistributionList">{{ $t('查询') }}</el-button>
            <el-button @click="resetDistributionForm">{{ $t('重置') }}</el-button>
          </el-col>
        </el-row>
      </el-form>
      <Table :table-data="distributionTable" :table-column="distributionColumn" :page="false" :selection="true"
             :select-rows="distributionSelectRows" @handleSelectionChange="distributionSelectChange"/>
    </Dialog>
  </Dialog>
</template>

<script>
import {transferList, selectTransfer, searchTransfer, guestBindList, guestGroupBindList} from '@/api/postLoan'

export default {
  props: {
    transferVisible: {},
    guestGroupList: {},
    productList: {},
    buttonId: {}
  },
  data() {
    return {
      transferPage: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      transferTable: [],
      auditPersonnelList: [],
      transferTableColumn: [
        {label: this.$t('订单编号'), prop: 'recordId', align: 'center'},
        {label: this.$t('客群名称'), prop: 'guestGroupName', align: 'center'},
        {label: this.$t('用户姓名'), prop: 'userName', align: 'center'},
        {label: this.$t('手机号码'), prop: 'userPhone', align: 'center'},
        {label: this.$t('应还时间'), prop: 'refundDate', align: 'center'},
        {label: this.$t('剩余应还金额'), prop: 'surplusRefundAmount', align: 'center'},
        {label: this.$t('APP名称'), prop: 'appName', align: 'center'},
        {label: this.$t('提醒员'), prop: 'adminUserName', align: 'center'},
      ],
      transferSelectRows: [],
      distribution: {
        isShow: false,
        title: '',
        type: ''
      },
      distributionTable: [],
      distributionColumn: [
        {label: this.$t('姓名'), prop: 'adminName', align: 'center'},
        {label: this.$t('账号'), prop: 'accountNumber', align: 'center'},
      ],
      distributionPage: {},
      productName: '',
      managerList: [],
      distributionSelectRows: [],
      loading: false
    }
  },
  methods: {
    async getTransferTable() {
      this.$refs.transferSearch.validate(async v => {
        if (v) {
          const params = Object.assign({}, this.transferPage, {
            productId: this.productList.filter(item => item.productName === this.transferPage.productName)[0].productId
          })
          this.loading = true
          const res = await transferList({...params, status: 0})
          if (res.code === 1) {
            const {list, total} = res.data
            this.loading = false
            this.transferTable = list
            this.transferPage = Object.assign({}, this.transferPage, {
              total: total
            })
          }
        }
      })
    },
    handleSizeChange(val) {
      this.transferPage.pageSize = val
      this.getTransferTable()
    },
    handleCurrentChange(val) {
      this.transferPage.pageNum = val
      this.getTransferTable()
    },
    // 产品下拉回调
    async productChange(value) {
      this.productName = value
      // 没有经理权限 调用提醒员下拉
      if (!this.$permiss[971]) {
        this.auditPersonnelList = await guestGroupBindList({
          productName: value,
          guestGroupId: this.transferPage.guestGroupId,
          adminRole: 9,
          pageSize: 100
        }).then(res => res.data.list)
      } else {
        // 获取经理
        guestGroupBindList({
          productName: value,
          guestGroupId: this.transferPage.guestGroupId,
          adminRole: 8,
          pageSize: 100
        }).then(res => {
          this.managerList = res.data.list
          this.auditPersonnelList = []
          // 清空上一个选择的值
          this.$set(this.transferPage, "adminUserId", null)
          this.$set(this.transferPage, "managerId", null)
        })
      }
    },
    // 经理下拉
    async managerSelect(value) {
      if (value) {
        this.$set(this.transferPage, "adminUserId", null)
        this.auditPersonnelList = await guestGroupBindList({
          productName: this.productName,
          guestGroupId: this.transferPage.guestGroupId,
          managerId: value,
          adminRole: 9,
          pageSize: 100
        }).then(res => res.data.list)
      } else {
        this.transferPage.managerId = null
        this.transferPage.adminUserId = null
      }
    },
    transferSelectChange(value) {
      this.transferSelectRows = value
    },
    async selectDistribution() {
      if (this.transferSelectRows.length === 0) return this.$message.error(this.$t('请选择要分配的订单'))
      await this.getDistributionList()
      this.distribution = {
        isShow: true,
        type: 'select',
        title: this.$t('所选分配')
      }
    },
    searchDistribution() {
      this.$refs.transferSearch.validate(async v => {
        if (v) {
          await this.getDistributionList()
          this.distribution = {
            isShow: true,
            type: 'search',
            title: this.$t('所搜分配')
          }
        }
      })

    },
    //获取分配列表
    async getDistributionList() {
      this.distributionTable = await guestBindList({
        ...this.distributionPage,
        managerId: this.transferPage.managerId,
        productName: this.productName,
        guestGroupId: this.transferPage.guestGroupId,
        valid: 1,
      }).then(res => res.data)
    },
    // 选择提醒员
    distributionSelectChange(value) {
      this.distributionSelectRows = value
    },

    // 分配提交
    async distributionSubmit() {
      if (this.distributionSelectRows.length === 0) return this.$message.error(this.$t('请选择提醒员'))
      let params = {}
      let api
      if (this.distribution.type === 'select') {
        // 所选分配
        params.adminUserIdList = this.distributionSelectRows
        params.todayExpireIdList = this.transferSelectRows
        api = selectTransfer(params)
      } else {
        // 所搜分配
        params = {
          ...this.transferPage,
          pageNum: undefined,
          pageSize: undefined,
          total: undefined,
          productId: this.productList.filter(item => item.productName === this.transferPage.productName)[0].productId,
          adminUserIdList: this.distributionSelectRows
        }
        api = searchTransfer(params)
      }
      const res = await api
      if (res.code === 1) {
        this.$message.success(this.$t('分配成功'))
        this.clearDistributionSearch()
        this.getTransferTable()
        this.$emit('confirm')
        this.distributionSelectRows = []
        this.distribution.isShow = false
      }
    },
    // 表单调单重置
    resetTransferForm() {
      this.clearTransferForm()
      this.getTransferTable()
    },
    // 表单调单清空
    clearTransferForm() {
      this.transferPage = {
        pageSize: 10,
        pageNum: 1,
        total: 0
      }
      this.transferTable = []
      this.$refs.transferSearch.resetFields()
    },
    // 表单分配清空
    clearDistributionSearch() {
      this.distributionPage = {}
      this.$refs.distributionSearch.resetFields()
    },
    // 表单分配重置
    resetDistributionForm() {
      this.clearDistributionSearch()
      this.getDistributionList()
    },
    close() {
      this.transferTable = []
      this.clearTransferForm()
      this.$emit('update:transferVisible', false)
    }
  }
}
</script>

<style scoped>

</style>
